<template>
    <view>
        <status-bar :title="title"></status-bar>

        <view class="list" v-for="(item, index) in pageData" :key="index" @click="toDetails(item)">
            <text class="title">{{ item.title }}</text>
            <text class="add_time">{{ item.add_time }}</text>
        </view>
        <emptys title="暂无相关内容" v-if="!pageData.length"></emptys>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: '',
                page: 1,
                pageNum: 10,
                getMore: true,
                pageData: []
            };
        },
        onLoad() {
            this.DossierList();
        },
        methods: {
            DossierList() {
                this.$http
                    .post({
                        url: '/singleSaleApi/getUserDossierList',
                        data: {
                            page: this.page,
                            pageNum: this.pageNum
                        }
                    })
                    .then((res) => {
                        if (res.errcode != '100') return this.$Toast(res.msg);
                        this.title = res.title;
                        const result = res.data || [];
                        this.page == 1 ? (this.pageData = result) : (this.pageData = [...this.pageData, ...result]);
                        if (result.length < this.pageNum) this.getMore = false;
                    });
            },
            toDetails(currentItem) {
                this.toUrl(`details?id=${currentItem.id}`);
            }
        },
        onReachBottom() {
            if (!this.getMore) return;
            this.page++;
            this.DossierList();
        }
    };
</script>
<style lang="scss">
    page {
        background-color: $page;
    }
</style>
<style lang="scss" scoped>
    .list {
        width: 710rpx;
        margin: 24rpx auto 0;
        padding: 20rpx 24rpx;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        border-radius: 10rpx;
        .title {
            color: #333;
            font-size: 30rpx;
        }
        .add_time {
            color: #999;
            font-size: 24rpx;
            margin-top: 10rpx;
        }
    }
</style>
